<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>mamma</title>
<link rel="shortcut icon" href="../image/icon_mamma.ico">
<link href="../css/babyInfo/babyAdd.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="../js/jquery-ui-1.11.1.custom/jquery-ui.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

<script src="../js/jquery-2.1.1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="../js/imgLiquid-min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	
	$('select').on('change', function(){
		var babynum = $("select option:selected").attr('value');
		if(babynum == -1) return;
		$('#babynum').attr('value', babynum);
		baby(babynum);
	});
	
	$('#btn').on('click', formSubmit);
	$('select option[value=<s:property value="list[0].babynum" />]').attr('selected', true);
	baby(<s:property value='list[0].babynum' />);
	
	profileMenu();
});

function profileMenu() {
	$('div.info').click(function(){
		$('#profileMenu').toggle();	
	});
	
	$('#chartMenu div.button i').on('click', function(){
		$('#chartMenu div.chartMenu').slideToggle();
	});
}

function baby(num) {
	$.ajax({
		url: 'listBabyInfo.action',
		type: 'POST',
		dataType: 'json',
		data: {num: num},
		success: output
	});	
}

function formSubmit(){
	var height = $('#height').val();
	var weight = $('#weight').val();
	var headsize = $('#headsize').val();
	var inputdate = $('#inputdate').val();
	var babynum = $('#babynum').val();
	
	/* alert('측정일 : ' + inputdate + '키(cm) : ' + height + ', 몸무게(kg) : ' + weight + ', 머리둘레(cm) : ' + headsize); */
	$('#height').val('');
	$('#weight').val('');
	$('#headsize').val('');
	$('#inputdate').val('');
	
	$.ajax({
		url: 'insertBabyInfo.action',
		type: 'POST',
		dataType: 'json',
		data: {inputdate: inputdate, height: height, weight: weight, headsize: headsize, babynum: babynum},	
		success: function(){
			baby(babynum);
		}
	});
}

function output(msg){
	
	$('#listbaby').html('');
	
	/* alert('과연?'); */
	var str = '<table class="babydata_wrap">';
		str+= '<colgroup>';
		str+= '<col style="width:25%" />';
		str+= '<col style="width:25%" />';
		str+= '<col style="width:25%" />';
		str+= '<col style="width:25%" />';
		str+= '</colgroup>';
		str+= '<thead>';
		str+= '<tr><th>측정일</th><th>키(cm)</th><th>몸무게(kg)</th><th>머리둘레(cm)</th></tr>';
		str+= '</thead>';
		str+= '<tbody>';
		
		var babyHeight = new Array();
		var babyWeight = new Array();
		var babyHeadsize = new Array();
		var babyInputdate = new Array();
		
		/* var weakCount = new Array(); */
		var index = 0;
		
    $.each(msg.list, function(key, item){
		str += '<tr>';
		str += '<td class="tdInputdate">' + item.inputdate + '</td>';
		str += '<td class="tdHeight">' + item.height + '</td>';
		str += '<td class="tdWeight">' + item.weight + '</td>';
		str += '<td class="tdHeadsize">' + item.headsize + '</td>';
		str += '</tr>';
		
		babyHeight[index] = item.height;
		babyWeight[index] = item.weight;
		babyHeadsize[index] = item.headsize;
		babyInputdate[index] = item.inputdate;
		
		/* weakCount[index] = (index+1)+'주차'; */
		index = index + 1;
    });
    
    str += '</tbody>';
    str += '</table>';

    $('#baby_table').html(str);
    
	//그래프(차트)구현
    $('#container1').highcharts({
        chart: {type: 'column'},
        title: {text: 'mamma 성장그래프'},
        colors: [
                 '#FFC2D6', '#FF75D1', '#FF0066'
             ],
        xAxis: {categories: babyInputdate},
        yAxis: {min:0, title:{text:'키/몸무게/머리둘레'}},
        tooltip: {
           headerFormat: '<span style="font-size: 10px">{point.key}</span><table>',
           pointFormat: '<tr><td style = "color{series.color};padding:0">{series.name}:</td>' +
                     '<td style = "padding:0"><b>{point.y:1f}\</b></td></tr>',
           footerFormat: '<table>',
           shared: true,
           useHTML: true
        },
        plotOptions: {
           column: {
              pointPadding: 0.2,
              borderWidth: 0
           }
        },
        
        series: [{name: '키(cm)',
              data: babyHeight},   
        
              {name: '몸무게(kg)',
              data: babyWeight},
        
             {name: '머리둘레(cm)',
              data: babyHeadsize},
        ]
     });
}
</script>
<style type="text/css">
#chartMenu {
	width: 100px;
	height: 300px;
	margin-top: 30px; margin-left: 1204px;
	position: absolute;
}
#chartMenu a:LINK{ color: black; }
#chartMenu a{ text-decoration: none; }
#chartMenu a:VISITED{ color: black; }
#chartMenu i.fa-bars {
	color: white;
	font-size: 30pt;
	margin-left: 30px;
	cursor: pointer;
}
#chartMenu .chartMenu{
	position: absolute;
	width: 100px;
	height: 170px;
	background-color: white;
	margin-top: 10px;
	display: none;
	border: 1px solid lightgray;
}
#chartMenu ul li {
	font-size: 9pt;
	list-style: none;
	width: 80px; height: 30px;
	margin-left: -40px; margin-top: 10px;
	padding-bottom: 5px; padding-top: 5px;
	padding-left: 10px; padding-right: 10px;
}
#chartMenu ul li:hover {
	background-color: #FF5459;
	color: white;
	cursor: pointer;
}
#chartMenu ul li.selected_menu {
	background-color: #FF5459;
	color: white;
}
</style>
</head>
<body>
<jsp:include page="../account/header.jsp" />
<div class="wrap">
		<div id="chartMenu">
			<div class="button"><i class="fa fa-bars"></i></div>
			<div class="chartMenu">
				<ul>
					<li class="selected_menu"><i class="fa fa-line-chart"></i> 성장 그래프</li>
					<a href="../baby/goBabyDaily.action?email=<s:property value='email' />">
						<li><i class="fa fa-pie-chart"></i> 데일리 차트</li>
					</a>
					<a href=""><li><i class="fa fa-history"></i> 히스토리</li></a>
				</ul>
			</div>
		</div>
		<div id="main_wrap">
			<div class="top">
				<div class="title">
					<img src="../image/babyInfo/grow_title.png" alt="얼마나 성장했을까?" />
				</div>

				<input type="hidden" id="babynum" value="<s:property value='list[0].babynum' />" />
					<select id="babyList" class="babySelect">
						<option value="-1">아기선택</option>
					<s:iterator value="list">
						<option value="<s:property value='babynum' />">
						<s:property value='name' /></option>
					</s:iterator>
				</select>
			</div>

			<div class="con_wrap">
			<div id="main">
				<div class="baby_con">

					<!-- 입력 -->
					<div class="baby_list">
						<div class="bar01">
							<div class="baby_list_tit">날짜</div>
							<div class="baby_list_value">
								<input type="date" class="baby_list_input" id="inputdate"
									placeholder="생년월일" />
							</div>
						</div>
						<div class="bar01">
							<div class="baby_list_tit">키(cm)</div>
							<div class="baby_list_value">
								<input type="text" class="baby_list_input" id="height" />
							</div>
						</div>
						<div class="bar01">
							<div class="baby_list_tit">몸무게(kg)</div>
							<div class="baby_list_value">
								<input type="text" class="baby_list_input" id="weight" />
							</div>
						</div>
						<div class="bar01">
							<div class="baby_list_tit">머리둘레(cm)</div>
							<div class="baby_list_value">
								<input type="text" class="baby_list_input" id="headsize" />
							</div>
						</div>

						<!-- 버튼 -->
						<div class="btn_enter">
							<p class="btn">
								<input type="button" id="btn" class="btn_style" value="기록하기" />
							</p>
						</div>
					</div>

					<!-- 결과 -->
					<div id="baby_table_wrap">
						<div id="baby_table"></div>
					</div>

				</div>

				<div class="graph" id="container1"
					style="min-width: 310px; height: 400px; margin: 0 auto"></div>
				<div class="bottom2">
					<img src="../image/babyInfo/grow_con_bg.png">
				</div>
				<div class="bottom"></div>
			</div>
			</div>
		</div>
	</div>
</body>
</html>
